<!DOCTYPE html>
<html>
<head>
	<title>弹出层效果</title>
	<meta charset="utf-8">
	<style type="text/css">
		button{
			margin:10px;
		}
		div,h2{
			margin:0;
			padding: 0;
		}
		.cover{
			position: absolute;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			opacity: 0.5;
			filter: alpha(opacity=50);/*针对ie*/
			display: none;
		}
		#alert-box{
			width: 400px;
			height: 200px;
			background: #fff;
			border: 2px solid #f90;
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -102px 0 0 -202px;
			display: none;
		}
		#alert-box h2{
			font-size: 12px;
			background:#FC0;
			border-bottom: 2px solid #f90;
			padding: 5px;
		}
		.close{
			float: right;
			margin-right: 5px;
			padding:0 3px;
			border: 1px solid #f90;
			background: #fff;
			color:#f90;
			cursor: pointer;
		}

	</style>
</head>
<body>
<input type="button" name="" value="弹出层">
<div class="cover"></div>
<div id="alert-box">
	<h2>This is Title<span class="close">x</span></h2>
</div>

<script type="text/javascript">
	window.onload=function(){
		var btn=document.getElementsByTagName('input')[0];
		var cover=document.getElementsByClassName('cover')[0];
		var box=document.getElementById('alert-box');
		var close=document.getElementsByClassName('close')[0];
		btn.onclick=function(){
			cover.style.display='block';
			box.style.display='block';
		}
		close.onclick=function(){
			cover.style.display='none';
			box.style.display='none';
		}
	}
	//注意filter: alpha(opacity=50);可以兼容ie
	//当蒙层在弹出层的下方时需要用z-index
</script>
</body>
</html>